<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>v-model 结合复选按钮的使用</title>
</head>
<body>
<div id="app">
    <form action="" method="get">
        <h2>请选择您的爱好</h2>
        <label for="basketball">
            <input type="checkbox" name="hobbies" id="basketball" value="basketball" v-model="hobbies">篮球
        </label>
        <label for="football">
            <input type="checkbox" name="hobbies" id="football" value="football" v-model="hobbies">足球
        </label>
        <label for="table-tennis">
            <input type="checkbox" name="hobbies" id="table-tennis" value="table-tennis" v-model="hobbies">乒乓
        </label>
        <label for="tennis">
            <input type="checkbox" name="hobbies" id="tennis" value="tennis" v-model="hobbies">网球
        </label>

        <br>
        <!--恢复页面中设置的默认值-->
        <input type="reset" value="reset" @click="resetHobbies">
        <!--表单提交到指定的页面-->
        <input type="submit" value="submit">
    </form>

    <h1>您的爱好是：{{ hobbies }}</h1>
</div>

<script type="module">
    import {createApp, ref} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let hobbies = ref([])

                function resetHobbies() {
                    // hobbies.value = []
                    hobbies.value.splice(0, hobbies.value.length)
                }

                return {
                    hobbies, resetHobbies,
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>